<template>
  <div class="content-box">
    <Card title="商品列表设置" style="min-height: 100%">
      <Layout class="class-layout">
        <Sider hide-trigger collapsible :width="256" :collapsed-width="64" v-model="collapsed" class="left-sider">
          <div class="ivu-left-list" v-if="false">
            <Select v-model="className" class="class-select" @on-change="changeselect">
              <Option v-for="item in ClassList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </div>
          <div class="iu-tree1">
            <Tree :data="treeListData" ref="tree" @on-select-change="selectChange"></Tree>
          </div>
        </Sider>
        <Layout>
          <Content class="goods-content-con">
            <div class="iu-table-div">
              <div class="operTime">
                <span>快速查询：</span>
                <Input v-model="fastQuery" placeholder="请输入商品名称、编号、条形码" size="large" style="width: 300px"></Input>
                <Button type="primary" size="large" @click="quickSearch">查询</Button>
              </div>
              <!-- <Row style="padding-top:10px">
                <Button icon="ios-search" type="primary" size="large">查询</Button>
              </Row>-->
              <div style="padding-top: 20px">
                <ButtonGroup>
                  <Button icon="md-add" @click="add" type="primary">增加</Button>
                  <Button icon="ios-eye" @click="show" type="info">查看</Button>
                  <Button icon="md-trash" @click="deleted" type="error">删除</Button>
                  <Button icon="md-create" @click="edit()" type="warning">修改</Button>
                  <Upload :show-upload-list="false" :headers="headers" :action="actionUrl"
                    :before-upload="handleBeforeUpload" :on-success="handleSuccessUpload" :on-error="handleErrorUpload"
                    class="fl">
                    <Button icon="md-log-in" type="primary">导入</Button>
                  </Upload>
                  <Button icon="md-log-out" type="primary" @click="productExportExcel">导出</Button>
                  <Button icon="md-download" type="primary" @click="productTmplDownload">下载导入模板</Button>
                  <Button icon="md-download" type="primary" @click="producterrorExl">导出错误</Button>
                </ButtonGroup>
              </div>
              <Table class="table-all-width" :columns="tableColumns" :data="tableData" :stripe="true" :border="true"
                @on-select="selectTable" @on-select-cancel="selectTableCancel" @on-select-all="selectTableAll"
                @on-select-all-cancel="selectTableAllCancel"></Table>
              <div class="page-box" v-if="true">
                <Page :total="total" :page-size="pageSize" :page-size-opts="lis" show-sizer @on-change="changePage"
                  @on-page-size-change="changePageSize" />
              </div>
            </div>
            <Modal v-model="impResults" title="导入结果">
              <div class="dao">导入成功{{ impResultsnum}}条</div>
              <div class="dao">导入失败{{ failCntnum }}条</div>
              <div class="classdownload dao" v-if="failCntnum!=0">下载错误文件：<div class="downloadxls" @click="xiazaicuowu">
                  商品导入错误文件.xls</div>
              </div>
            </Modal>
            <ProducterrorExl v-if="ProducterrorExlshow" @downloadxls="downloadxls" :data6="data6"
              @producterrorExlheid="producterrorExlheid">
            </ProducterrorExl>
            <Modal :mask-closable="false" class="formTop" v-model="showAdd" :title="showTitle" @on-cancel="closeModal"
              width="70%">
              <Form ref="formItem" :model="formItem" :label-width="80" :rules="formRules" class="form-box">
                <span style="
                    display: inline-block;
                    width: 100%;
                    height: 30px;
                    line-height: 20px;
                    font-size: 14px;
                    font-weight: bold;
                  ">基础信息</span>
                <Row :gutter="20">
                  <Col span="7">
                  <FormItem label="商品类型" prop="standardFlag" style="margin-bottom: 14px">
                    <RadioGroup v-model="formItem.standardFlag" @on-change="handleGoodsTypeChange">
                      <Radio label="1" :disabled="isShowGoodsType" checked>标准商品</Radio>
                      <Radio label="0" :disabled="isShowGoodsType" style="margin-left: 10px">非标商品</Radio>
                    </RadioGroup>
                  </FormItem>
                  </Col>
                  <Col span="7" v-if="formItem.standardFlag != '1'">
                  <FormItem label="售卖方式" prop="openWeigh" style="margin-bottom: 14px">
                    <RadioGroup v-model="formItem.openWeigh" @on-change="openWeighChange">
                      <Radio label="0" :disabled="isShowGoodsType" checked>按件</Radio>
                      <Radio label="1" :disabled="isShowGoodsType" style="margin-left: 10px">称重</Radio>
                    </RadioGroup>
                  </FormItem>
                  </Col>
                </Row>
                <Row :gutter="20">
                  <Col span="7">
                  <FormItem label="商品名称" prop="productName">
                    <Input v-model="formItem.productName" :disabled="isShow" placeholder="请输入商品名称" />
                  </FormItem>
                  </Col>
                </Row>
                <Row :gutter="20">
                  <Col :span="
                      formItem.standardFlag == '1' && modalFlag != 'show'
                        ? 5
                        : 7
                    " :class="
                      formItem.standardFlag == '1' && modalFlag != 'show'
                        ? 'editable-product-barcode-input-col'
                        : ''
                    ">
                  <FormItem label="条形码" prop="productBarcode">
                    <Input ref="productBarcodeInput" v-model="formItem.productBarcode"
                      @on-change="handleProductBarcodeInputChange" @on-focus="handleProductBarcodeInputFocus"
                      @on-blur="handleProductBarcodeInputBlur" :disabled="isShowGoodsType" :placeholder="
                          formItem.standardFlag == '1'
                            ? '请输入7-14位条码'
                            : '请输入条码'
                        " />
                  </FormItem>
                  </Col>
                  <Col span="1" v-if="formItem.standardFlag == '1' && modalFlag != 'show'"
                    class="product-barcode-input-edit-button-col">
                  <Button @click="addProductBarcodeInput" class="product-barcode-input-edit-btn" plain>增加</Button>
                  </Col>
                  <Col span="7">
                  <FormItem label="零售价" prop="salePrice">
                    <Input number v-model="formItem.salePrice" :disabled="isShow" placeholder="0.00" />
                  </FormItem>
                  </Col>
                  <Col span="7">
                  <FormItem label="商品分类" prop="classCode">
                    <Select v-model="formItem.classCode" :disabled="isShow" filterable>
                      <Option v-for="item in selecteClass" :value="item.classCode" :key="item.classCode">{{
                        item.className }}</Option>
                    </Select>
                  </FormItem>
                  </Col>
                </Row>
                <div v-if="formItem.standardFlag == '1'" v-for="(item, index) in productBarcodeList">
                  <Row :gutter="20">
                    <Col :span="
                        formItem.standardFlag == '1' && modalFlag != 'show'
                          ? 5
                          : 7
                      " :class="
                        formItem.standardFlag == '1' && modalFlag != 'show'
                          ? 'editable-product-barcode-input-col'
                          : ''
                      ">
                    <FormItem label="条形码">
                      <Input :id="`otherProductBarcodeInput${item.index}`" :disabled="isShow"
                        @on-focus="handleProductBarcodeInputFocus" v-model="item.value" placeholder="请输入7-14位条码"
                        :maxlength="14" />
                    </FormItem>
                    </Col>
                    <Col span="1" v-if="modalFlag != 'show'" class="product-barcode-input-edit-button-col">
                    <Button @click="deleteProductBarcodeInput(item.index)" class="product-barcode-input-edit-btn"
                      plain>删除</Button>
                    </Col>
                  </Row>
                </div>
                <div>
                  <span style="
                      display: inline-block;
                      width: 100%;
                      height: 30px;
                      line-height: 20px;
                      font-size: 14px;
                      font-weight: bold;
                    ">库存信息</span>
                  <Row :gutter="20">
                    <Col span="7">
                    <FormItem label="商品库房" prop="depotCode">
                      <Select v-model="formItem.depotCode" :disabled="isShow" filterable>
                        <Option v-for="item in depotCode" :value="item.value" :key="item.label + item.value">{{
                          item.label }}</Option>
                      </Select>
                    </FormItem>
                    </Col>
                    <Col span="7">
                    <FormItem label="初始库存" prop="stockNumber">
                      <Input number v-model="formItem.stockNumber" :disabled="modalFlag != 'add'" placeholder="0" />
                    </FormItem>
                    </Col>
                    <!-- <Col span="7">
                      <FormItem label="门店编号" prop="storeCode">
                        <Input v-model="formItem.storeCode" :disabled="true" placeholder="请输入门店编号"/>
                      </FormItem>
                    </Col>
                    <Col span="7">
                      <FormItem label="商品编号" prop="productCode">
                        <Input
                          v-model="formItem.productCode"
                          :disabled="true"
                          :placeholder="(modalFlag=='add')?'系统自动生成':'请输入商品编号'"
                        />
                      </FormItem>
                    </Col> -->
                  </Row>
                  <Row :gutter="20">
                    <Col span="7">
                    <FormItem label="库存预警" prop="stockAlarm">
                      <Select v-model="formItem.stockAlarm" :disabled="isShow" @on-change="stockAlarmValue">
                        <Option v-for="item in stockAlarm" :value="item.value" :key="item.label + item.value">{{
                          item.label }}</Option>
                      </Select>
                    </FormItem>
                    </Col>
                    <Col span="7">
                    <FormItem label="库存上限" prop="maxNum">
                      <Input v-model="formItem.maxNum" :disabled="isNum" placeholder="请输入库存上限" />
                    </FormItem>
                    </Col>
                    <Col span="7">
                    <FormItem label="库存下限" prop="minNum">
                      <Input v-model="formItem.minNum" :disabled="isNum" placeholder="请输入库存下限" />
                    </FormItem>
                    </Col>
                  </Row>
                </div>
                <span style="
                    display: inline-block;
                    width: 100%;
                    height: 30px;
                    line-height: 20px;
                    font-size: 14px;
                    font-weight: bold;
                  ">更多信息</span>
                <Row :gutter="20">
                  <Col span="7">
                  <FormItem label="品牌" prop="brand">
                    <Input v-model="formItem.brand" :disabled="isShow" placeholder="请输入商品品牌" />
                  </FormItem>
                  </Col>
                  <Col span="7">
                  <FormItem label="会员价" prop="memberPrice">
                    <Input number v-model="formItem.memberPrice" :disabled="isShow" placeholder="0.00" />
                  </FormItem>
                  </Col>
                  <Col span="7">
                  <FormItem label="商品单位" prop="productUnit">
                    <Input v-model="formItem.productUnit" :disabled="isShow" placeholder="个" v-if="
                          formItem.standardFlag == '1' ||
                          (formItem.standardFlag != '1' &&
                            formItem.openWeigh == '0')
                        " />
                    <Input v-model="formItem.productUnit" :disabled="true" placeholder="kg" v-else />
                  </FormItem>
                  </Col>
                </Row>
                <Row :gutter="20">
                  <Col span="7">
                  <FormItem label="产地" prop="producingArea">
                    <Input v-model="formItem.producingArea" :disabled="isShow" placeholder="请输入商品产地" />
                  </FormItem>
                  </Col>
                  <Col span="7">
                  <FormItem label="成本价" prop="costPrice">
                    <Input number v-model="formItem.costPrice" :disabled="isShow" placeholder="0.00" />
                  </FormItem>
                  </Col>
                  <Col span="7">
                  <FormItem label="商品规格" prop="specifications">
                    <Input v-model="formItem.specifications" :disabled="isShow" placeholder="请输入商品规格" />
                  </FormItem>
                  </Col>
                </Row>
                <Row :gutter="20">
                  <Col span="7">
                  <FormItem label="商品名简拼" prop="productSimplicity">
                    <Input v-model="formItem.productSimplicity" :disabled="isShow" placeholder="商品名简拼" />
                  </FormItem>
                  </Col>
                  <Col span="7">
                  <FormItem label="批发价" prop="wholesalePrice">
                    <Input number v-model="formItem.wholesalePrice" :disabled="isShow" placeholder="请输入商品批发价" />
                  </FormItem>
                  </Col>
                  <Col span="7">
                  <FormItem label="产品标志" prop="flag">
                    <Select v-model="formItem.flag" :disabled="isShow">
                      <Option value="0">正常</Option>
                      <Option value="1">下架</Option>
                    </Select>
                  </FormItem>
                  </Col>
                </Row>
                <Row :gutter="20">
                  <Col span="7">
                  <FormItem label="商品英文或拼音名称" prop="productEnglishName">
                    <Input v-model="formItem.productEnglishName" :disabled="isShow" placeholder="商品英文或拼音名称" />
                  </FormItem>
                  </Col>
                  <Col span="7">
                  <FormItem label="批发价起批数量" prop="minTradeNum">
                    <Input number v-model="formItem.minTradeNum" :disabled="isShow" @on-blur="onblurNum"
                      placeholder="请输入批发价起批数量" />
                  </FormItem>
                  </Col>
                  <Col span="7">
                  <FormItem label="是否折扣" prop="discountFlag">
                    <Select v-model="formItem.discountFlag" :disabled="isShow">
                      <Option value="0">否</Option>
                      <Option value="1">是</Option>
                    </Select>
                  </FormItem>
                  </Col>
                </Row>
                <!-- <Row :gutter="20"> -->
                <!-- <Col span="7">
                    <FormItem label="是否称重" prop="openWeigh">
                      <Select v-model="formItem.openWeigh" :disabled="isShow">
                        <Option value="0">否</Option>
                        <Option value="1">是</Option>
                      </Select>
                    </FormItem>
                  </Col>
                </Row> -->
                <Row :gutter="20">
                  <Col span="7">
                  <FormItem label="经销方式" prop="distribution">
                    <Select v-model="formItem.distribution" :disabled="isShow">
                      <Option value="0">经销</Option>
                      <Option value="1">代销</Option>
                      <Option value="2">自营</Option>
                    </Select>
                  </FormItem>
                  </Col>
                </Row>
                <FormItem label="备注" prop="remark">
                  <Input v-model="formItem.remark" :disabled="isShow" type="textarea" placeholder="请输入备注信息" />
                </FormItem>
                <FormItem label="上传图片">
                  <div class="demo-upload-list" v-if="formItem.productPicture">
                    <template>
                      <img :src="formItem.productPicture" />
                      <div class="demo-upload-list-cover" v-if="!isShow">
                        <Icon type="ios-trash-outline" @click.native="handleRemovePicture(uploadList)"></Icon>
                      </div>
                    </template>
                  </div>
                  <Upload v-if="!formItem.productPicture" ref="upload" :show-upload-list="false" :headers="headers"
                    :format="['jpg', 'jpeg', 'png']" :max-size="20480" type="drag" :on-success="handleSuccess"
                    :action="ImgUrl" style="display: inline-block; width: 200px">
                    <div style="width: 200px; height: 150px; line-height: 150px">
                      <Icon type="ios-camera" size="50"></Icon>
                    </div>
                  </Upload>
                </FormItem>
                <FormItem prop="stockAlarmId">
                  <Input v-model="formItem.stockAlarmId" style="display: none" />
                </FormItem>
              </Form>
              <div slot="footer" v-if="modalFlag != 'show'">
                <Button style="margin-left: 8px" @click="handleCancel('formItem')">取消</Button>
                <Button type="warning" @click="handleSubmitAndAgain('formItem')" v-if="modalFlag == 'add'">继续添加</Button>
                <Button type="primary" @click="handleSubmit('formItem', false)">保存并入库</Button>
              </div>
            </Modal>
          </Content>
        </Layout>
      </Layout>
    </Card>
    <Modal :mask-closable="false" v-model="modalDel" width="360">
      <p slot="header" style="color: #f60; text-align: center">
        <Icon type="ios-information-circle"></Icon>
        <span>删除确认</span>
      </p>
      <div style="text-align: center">
        <p>确认删除产品？</p>
      </div>
      <div slot="footer">
        <Button type="error" size="large" long :loading="delLoading" @click="producBatchDeleteByIds">删除</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import Vue from "vue";
import storage from "@/libs/storage";
import { buildTree, Format } from "@/assets/util";
import { stockWareHouseList, stockAlarm } from "@/api/stock";
import {
  productFind,
  productFindPage,
  productUpdate,
  productSave,
  producBatchDeleteByIds,
  productTmplDownload,
  productExportExcel,
  productExportExcelError,
  productExcelErrorList
} from "@/api/product";
import { productClassFindList, nonstandardGoodsBarcode } from "@/api/goods";
import { product, goods } from "@/api/resetApi";
import { saveAs } from "file-saver";
import { getToken } from "@/libs/util";
import ProducterrorExl from "@/components/producterrorExl/index.vue"
export default {
  data() {
    const validateNumber = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请填写价格"));
      }
      var reg = /^[0-9]+.?[0-9]*$/;
      if (!reg.test(value)) {
        callback(new Error("请填写数字"));
      } else {
        if (value < 0) {
          callback(new Error("不能小于零"));
        } else {
          callback();
        }
      }
    };
    return {
      stockAlarmIds: "",
      lis:[10,50,100,500,800,1000],
      storeCode: "",
      collapsed: false,
      delLoading: false,
      modalDel: false,
      showAdd: false,
      showTitle: "",
      isNum: true,
      selecteClass: [],
      productBarcodeList: [],
      lastInputBarcode: "", // 上一次输入的条形码
      isStartTimer: false,
      timer: "",
      depotCodeTemp: "",
      formItem: {
        standardFlag: "1",
        openWeigh: "0",
        storeCode: "",
        productCode: "",
        productName: "",
        stockNumber: "0",
        stockAlarm: 0,
        maxNum: "",
        minNum: "",
        productEnglishName: "",
        productSimplicity: "",
        minTradeNum: "0",
        depotCode: "",
        productUnit: "个",
        productBarcode: "",
        classCode: "",
        className: "",
        salePrice: "",
        wholesalePrice: "",
        memberPrice: "",
        costPrice: "",
        specifications: "",
        brand: "",
        producingArea: "",
        distribution: "",
        discountFlag: "0",
        flag: "",
        remark: "",
        productPicture: "",
        stockAlarmId: ""
      },
      stockAlarm: [
        {
          value: 0,
          label: "否"
        },
        {
          value: 1,
          label: "是"
        }
      ],
      depotCode: [],
      formRules: {
        productName: { required: true, message: "商品名称必须填写" },
        productBarcode: { required: true, message: "商品条码必须填写" },
        maxNum: {
          trigger: "blur",
          validator: this.alarmNum
        },
        minNum: {
          trigger: "blur",
          validator: this.stockNum
        },
        salePrice: {
          required: true,
          validator: validateNumber,
          trigger: "blur"
        }
      },
      modalFlag: "add",
      formIndex: -1,
      isShow: false,
      isShowGoodsType: false, // 商品类型编辑权限
      treeListData: [
        {
          expand: true,
          loading: false,
          selected: true,
          id: 0,
          classCode: "",
          className: "全部",
          title: "全部",
          pid: null,
          pids: null,
          level: 0,
          children: []
        }
      ],
      ClassList: [
        {
          value: "1",
          label: "类别"
        },
        {
          value: "2",
          label: "品牌"
        },
        {
          value: "3",
          label: "代理商"
        }
      ],
      className: "1",
      tableColumns: [
        {
          title: "",
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "门店编号",
          key: "storeCode",
          width: 110,
          sortable: true
          /*  fixed: 'left' */
        },
        {
          title: "商品编号",
          width: 110,
          key: "productCode",
          sortable: true
        },
        {
          title: "商品名称",
          width: 160,
          key: "productName",
          sortable: true
        },
        {
          title: "条形码",
          width: 160,
          key: "productBarcode",
          sortable: true
        },
        {
          title: "零售价",
          width: 100,
          key: "salePrice",
          sortable: true
        },
        {
          title: "成本价",
          width: 100,
          key: "costPrice",
          sortable: true
        },
        {
          title: "会员价",
          width: 100,
          key: "memberPrice",
          sortable: true
        },
        {
          title: "是否折扣",
          width: 160,
          key: "discountFlag",
          sortable: true,
          render: (h, params) => {
            return h("div", [
              h("strong", params.row.discountFlag == 1 ? "是" : "否")
            ]);
          }
        },
        {
          title: "单位",
          width: 160,
          key: "productUnit",
          sortable: true
        },
        {
          title: "批发价",
          width: 160,
          key: "wholesalePrice",
          sortable: true
        },
        {
          title: "规格",
          width: 160,
          key: "specifications",
          sortable: true
        },
        {
          title: "品牌",
          width: 160,
          key: "brand",
          sortable: true
        },
        {
          title: "产地",
          width: 160,
          key: "producingArea",
          sortable: true
        },
        {
          title: "经销方式",
          width: 160,
          key: "distribution",
          sortable: true,
          render: (h, params) => {
            return h("div", [
              h("strong", getDistribution(params.row.distribution))
            ]);
          }
        },
        {
          title: "产品标志",
          width: 160,
          key: "flag",
          sortable: true,
          render: (h, params) => {
            return h("div", [
              h("strong", params.row.flag == 1 ? "下架" : "正常")
            ]);
          }
        },
        {
          title: "是否称重",
          width: 160,
          key: "openWeigh",
          sortable: true,
          render: (h, params) => {
            return h("div", [
              h("strong", params.row.openWeigh == 1 ? "是" : "否")
            ]);
          }
        }
      ],
      tableData: [],
      classCode: "",
      pid: "",
      fastQuery: "",
      pageNum: 1,
      pageSize: 10,
      total: 0,
      ImgUrl: "",
      selection: [],
      currentTreeNode: {},
      headers: {},
      actionUrl: "",
      Loading: "",
      ImgData: {
        projectName: "retail_store_web",
        imgFolderName: "img"
      },
      imgName: "",
      visible: false,
      uploadList: [],
      ProducterrorExlshow: false,
      impResults: false,
      impResultsnum: 0,
      failCntnum: 0,
      batchId: '',
      data6:[]
    };
  },
  methods: {

    //导出错误的表格
   async producterrorExl() {
      
      const { data, status } = await productExcelErrorList({
        storeCode: this.$store.state.storeInfo.storeCode
      });
      if (status == 200) {
        this.ProducterrorExlshow = true
        this.data6 = data.data
      }
      console.log(this.storeCode, data, status, this.$store.state.storeInfo.storeCode);
    },
    async downloadxls(num) {
      console.log('aaaaa');
      this.$Message.success('正在导出请勿重复点击');
      const { data, status } = await productExportExcelError({
        batchId: num
      });
      if (status == 200) {
        let newTimeDate = new Date();
        let storeInfoJSON = localStorage.getItem("storeInfo");
        let storeInfo = JSON.parse(storeInfoJSON);
        let storeName = storeInfo.storeName;
        let date = Format(newTimeDate, "yy年MM月dd日hh时mm分ss秒");
        saveAs(data, "商品导入错误" + num + "批次" + ".xls");
      }
    },
    async xiazaicuowu() {
      this.$Message.success('正在导出请勿重复点击');
      const { data, status } = await productExportExcelError({
        batchId: this.batchId
      });
      if (status == 200) {
        let newTimeDate = new Date();
        let storeInfoJSON = localStorage.getItem("storeInfo");
        let storeInfo = JSON.parse(storeInfoJSON);
        let storeName = storeInfo.storeName;
        let date = Format(newTimeDate, "yy年MM月dd日hh时mm分ss秒");
        saveAs(data, "商品导入错误" + this.batchId +"批次"+ ".xls");
      }
    },
    producterrorExlheid() {
      console.log('aaaa');
      this.ProducterrorExlshow = false
    },
    // 初始化方法：加载树结构和默认选中子节点分类下的所有信息
    init() {
      this.storeCode = this.$store.state.storeInfo.storeCode;
      this.productClassFindList();
      // this.stockWareHouseList();
      this.setUpload();
      this.setImgLoad();
    },
    // 监听切换商品类型
    handleGoodsTypeChange(res) {
      if (res == 0) {
        // 非标商品
        this.getNonstandardGoodsBarcode();
        this.openWeighChange(parseInt(this.formItem.openWeigh));
      } else {
        // 标准商品
        this.openWeighChange(0);
        this.formItem.productBarcode = "";
        this.$refs.productBarcodeInput.focus();
      }
    },


    // 新增商品条码输入框
    addProductBarcodeInput() {
      if (this.productBarcodeList.length > 0) {
        if (this.productBarcodeList.length > 7) {
          this.$Message.warning("最多可增加8个条形码");
          return;
        }
        this.productBarcodeList.push({
          value: "",
          index:
            this.productBarcodeList[this.productBarcodeList.length - 1].index +
            1
        });
      } else {
        this.productBarcodeList.push({ value: "", index: 0 });
      }
    },
    // 删除新增的商品条码输入框
    deleteProductBarcodeInput(index) {
      for (let i = 0; i < this.productBarcodeList.length; i++) {
        const element = this.productBarcodeList[i];
        if (element.index == index) {
          this.productBarcodeList.splice(i, 1);
          break;
        }
      }
    },
    openWeighChange(res) {
      this.formItem.productUnit = res == 0 ? "个" : "kg";
    },
    onblurNum() {
      if (this.formItem.minTradeNum == "") {
        this.formItem.minTradeNum = "0";
      }
    },
    alarmNum(rule, value, callback) {
      let numBers = this.formItem.minNum;
      let res = /^[0-9]*$/;
      if (!res.test(value)) {
        callback(new Error("请输入纯数字"));
      } else {
        if (value <= parseFloat(numBers)) {
          callback(new Error("库存上限必须大于库存下限"));
        } else {
          callback();
        }
      }
    },
    stockNum(rule, value, callback) {
      let numBers = this.formItem.maxNum;
      let res = /^[0-9]*$/;
      if (!res.test(value)) {
        callback(new Error("请输入纯数字"));
      } else {
        if (value >= parseFloat(numBers)) {
          callback(new Error("库存下限必须小于库存上限"));
        } else {
          callback();
        }
      }
    },
    // 监听条形码输入框得到聚焦
    handleProductBarcodeInputFocus(res) {
      res.currentTarget.select();
    },
    // 监听条形码输入框失去聚焦
    handleProductBarcodeInputBlur() {},
    // 监听条形码输入
    handleProductBarcodeInputChange(res) {
      // 当条形码输入框开始输入时，
      if (this.formItem.productBarcode.length > 0 && !this.isStartTimer) {
        this.isStartTimer = true;
        this.startTimer();
      }
      // 输入框为空时，计时器准备
      if (this.formItem.productBarcode.length == 0) {
        this.isStartTimer = false;
      }
    },
    // 开始计时
    startTimer() {
      this.timer = setInterval(this.barcodeValChange, 1000);
    },
    endTimer() {
      this.isStartTimer = false;
      clearInterval(this.timer);
    },
    barcodeValChange() {
      if (
        this.lastInputBarcode.length > 9 &&
        this.lastInputBarcode == this.formItem.productBarcode &&
        this.isStartTimer
      ) {
        this.productFindByCode();
        // 查询商品，停止计时
        this.endTimer();
      }
      // 每次计时计数保存当前输入值
      this.lastInputBarcode = this.formItem.productBarcode;
    },
    handleRemovePicture(file) {
      this.formItem.productPicture = "";
    },
    handleSuccess(res, file) {
      this.formItem.productPicture = res.data;
    },
    stockAlarmValue() {
      let numValue = this.formItem.stockAlarm;
      if (numValue == 0) {
        this.isNum = true;
        this.formItem.minNum = "";
        this.formItem.maxNum = "";
      } else {
        this.isNum = false;
      }
    },
    setImgLoad() {
      this.headers["authorization"] = getToken();
      this.headers["storeCode"] = this.$store.state.storeInfo.storeCode;
      this.ImgUrl =
        this.$config.baseUrl.pro +
        goods.imgUrlUpLoad +
        "?projectName=retail_store_web&imgFolderName=img";
    },
    setUpload() {
      this.headers["authorization"] = getToken();
      this.headers["storeCode"] = this.$store.state.storeInfo.storeCode;
      this.actionUrl = this.$config.baseUrl.pro + product.importExcelNew;
    },
    findArrIndex(item, data) {
      return data.findIndex((elem) => {
        return elem.id == item.id;
      });
    },
    removeArrItem(item) {
      let index = this.findArrIndex(item, this.selection);
      this.selection.splice(index, 1);
    },
    setFormByBarcode(productInfo) {
      this.formItem.productName = productInfo.name;
      this.formItem.salePrice = productInfo.price;
      this.formItem.productPicture = productInfo.pic;
      this.formItem.productEnglishName = productInfo.ename;
      this.formItem.brand = productInfo.brand;
      this.formItem.productUnit = productInfo.packageType;
      this.formItem.specifications = productInfo.netContent;
    },
    setFormItem(row) {
      const formItem = {};
      formItem.standardFlag = JSON.stringify(row.standardFlag);
      formItem.storeCode = row.storeCode;
      formItem.productCode = row.productCode;
      formItem.productName = row.productName;
      formItem.classCode = row.classCode;
      formItem.className = row.className;
      formItem.productEnglishName = row.productEnglishName;
      formItem.productSimplicity = row.productSimplicity;
      formItem.depotCode = row.depotCode;
      formItem.productUnit = row.productUnit;
      formItem.productBarcode = row.productBarcode;
      formItem.salePrice = row.salePrice;
      formItem.wholesalePrice = row.wholesalePrice;
      formItem.memberPrice = row.memberPrice;
      formItem.costPrice = row.costPrice;
      formItem.specifications = row.specifications;
      formItem.brand = row.brand;
      formItem.producingArea = row.producingArea;
      formItem.stockNumber = row.stockNumber;
      formItem.openWeigh = JSON.stringify(row.openWeigh);
      formItem.distribution = JSON.stringify(row.distribution);
      formItem.discountFlag = JSON.stringify(row.discountFlag);
      formItem.flag = JSON.stringify(row.flag);
      formItem.remark = row.remark;
      formItem.productPicture = row.productPicture;
      formItem.stockAlarmId = this.stockAlarmIds;
      formItem.minTradeNum = row.minTradeNum;

      var productBarcodeListTemp = [];
      for (let index = 0; index < row.productBarcodeList.length; index++) {
        const code = row.productBarcodeList[index];
        productBarcodeListTemp.push({ value: code, index: index });
      }
      this.productBarcodeList = productBarcodeListTemp;
      this.formItem = formItem;
    },
    selectTable(selection, row) {
      this.selection = selection;
    },
    selectTableAll(selection) {
      this.selection = selection;
    },
    selectTableCancel(row) {
      this.removeArrItem(row);
    },
    selectTableAllCancel(selection) {
      this.selection = selection;
    },
    changeselect(va) {},
    add() {
      this.$refs["formItem"].resetFields();
      this.modalFlag = "add";
      this.showAdd = true;
      this.isShowGoodsType = false;
      this.formItem.productPicture = "";
      this.showTitle = "新增商品信息";
      this.formItem.storeCode = this.$store.state.storeInfo.storeCode;
      this.formItem.classCode = this.classCode;
      this.productBarcodeList = [];

      this.$nextTick(() => {
        this.isNum = true;
        // 条形码输入框聚焦
        this.$refs.productBarcodeInput.focus();

        // 新增商品显示默认库房
        if (this.depotCode.length > 0) {
          let res = this.depotCode.filter((item) => {
            return item.label === "默认库房";
          });
          if (res.length > 0) {
            this.formItem.depotCode = res[0].value;
          } else {
            this.formItem.depotCode = this.depotCode[0].value;
          }
        }
      });
    },
    show() {
      if (this.selection.length == 1) {
        this.setFormItem(this.selection[0]);
        this.isShow = true;
        this.showAdd = true;
        this.isShowGoodsType = true;
        this.modalFlag = "show";
        this.showTitle = "查看商品信息";
        let storeCode = this.selection[0].storeCode;
        let productCode = this.selection[0].productCode;
        this.stockAlarms(storeCode, productCode);
        this.$nextTick(() => {
          this.isNum = true;
        });
      } else if (this.selection.length == 0) {
        this.$Message.warning("请选择选择一条");
      } else {
        this.$Message.warning("查看不支持多条");
      }
    },
    edit() {
      if (this.selection.length == 1) {
        this.$refs["formItem"].resetFields();
        this.formIndex = this.findArrIndex(this.selection[0], this.tableData);
        this.setFormItem(this.selection[0]);
        this.modalFlag = "edit";
        this.showTitle = "修改商品信息";
        this.isShow = false;
        this.showAdd = true;
        this.isShowGoodsType = true;
        let storeCode = this.selection[0].storeCode;
        let productCode = this.selection[0].productCode;
        this.stockAlarms(storeCode, productCode);
      } else if (this.selection.length == 0) {
        this.$Message.warning("请选择选择一条");
      } else {
        this.$Message.warning("暂不支持批量修改");
      }
    },
    addData(isAgain) {
      // if (this.formItem.stockAlarm == "0") {
      this.productSave(isAgain);
      // } else {
      //   if (this.formItem.minNum == "" || this.formItem.maxNum == "") {
      //     this.$Message.warning("库存上下限不能为空");
      //   } else {
      //     this.productSave(isAgain);
      //   }
      // }
    },
    editData() {
      // if (this.formItem.stockAlarm == "0") {
      this.productUpdate(this.formItem);
      // } else {
      //   if (this.formItem.minNum == "" || this.formItem.maxNum == "") {
      //     this.$Message.warning("库存上下限不能为空");
      //   } else {
      //     this.productUpdate(this.formItem);
      //   }
      // }
    },
    closeModal() {
      this.handleCancel("formItem");
    },
    handleSubmit(name, isAgain) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (this.modalFlag == "add") {
            this.addData(isAgain);
          } else if (this.modalFlag == "edit") {
            this.editData();
          } else if (this.modalFlag == "show") {
            this.closeModal();
          }
        } else {
          this.$Message.error("填写信息有误！");
        }
      });
    },
    handleSubmitAndAgain(name) {
      this.handleSubmit(name, true);
    },
    handleReset() {
      this.productBarcodeList = [];
      this.$refs["formItem"].resetFields();
    },
    handleCancel(name) {
      this.showAdd = false;
      this.isShow = false;
      this.formIndex = -1;
    },
    closeLoading(Loading) {
      let timer = setTimeout(() => {
        clearTimeout(timer);
        timer = null;
        
      }, 0);
      Loading && Loading.close();
    },
    // 非标品获取条形码
    async getNonstandardGoodsBarcode() {
      const Loading = this.$myLoading({
        content: "正在获取非标品条形码…"
      });
      const { data, status } = await nonstandardGoodsBarcode({});
      if (data.code == 200 && status == 200) {
        this.formItem.productBarcode = data.data;
      } else {
        this.$Message.info(data.message);
      }
      this.closeLoading(Loading);
    },
    // 标品根据商品69码查询商品信息
    async productFindByCode() {
      // const Loading = this.$myLoading({
      //   content: "正在查询，请稍后…"
      // });
      const { data, status } = await productFind({
        barcode: this.formItem.productBarcode
      });
      if (data.code == 200) {
        this.setFormByBarcode(data.data);
      } else {
        // this.$Message.info(data.message);
      }
      // this.closeLoading(Loading);
    },
    async productClassFindList() {
      console.log('1');
      // const Loading = this.$myLoading({
      //   content: "正在查询，请稍后…"
      // });
      this.tableLoading = true;
      const { data, status } = await productClassFindList({});
      if (data.code == 200 && status == 200) {
        let TreeUpdateList = buildTree(data.data, null);
        console.log(TreeUpdateList,'TreeUpdateList');
        this.treeListData[0].children = TreeUpdateList;
        this.selecteClass = data.data;
      } else {
        this.tableData = [];
        this.$Message.info(data.message);
      }
      console.log('1');
      // this.productFindPage(Loading);
      this.productFindPage();
      this.tableLoading = false;
    },
    // async productFindPage(Loading) {
    async productFindPage() {
      // console.log("11111");
      let classCode = this.classCode;
      let page = this.pageNum;
      let pageSize = this.pageSize;
      let fastQuery = this.fastQuery;
      let storeCode = this.storeCode;
      console.log("111111111");
      const { data, status } = await productFindPage({
        classCode,
        page,
        pageSize,
        fastQuery,
        storeCode
      });
      if (data.code == 200 && status == 200) {
        this.tableData = data.data.list;
        this.total = data.data.total;
      }
      // this.closeLoading(Loading);
    },
    async productUpdate(option) {
      const Loading = this.$myLoading({
        content: "正在保存，请稍后…"
      });
      var options = Object.assign(this.tableData[this.formIndex], option);
     
      var productBarcodeListTemp = [];
      if (this.formItem.standardFlag == "1") {
        // 标准商品
        if (this.productBarcodeList.length > 0) {
          for (let i = 0; i < this.productBarcodeList.length; i++) {
            const barcodeItem = this.productBarcodeList[i];
            productBarcodeListTemp.push(barcodeItem.value);
          }
        }
      }
      options["productBarcodeList"] = productBarcodeListTemp;

      const { data, status } = await productUpdate(options);
      if (data.code == 200 && status == 200) {
        this.tableData[this.formIndex] = options;
        let timer = setTimeout(() => {
          clearTimeout(timer);
          timer = null;
          this.closeModal();
          Loading.close();
          this.$Message.success("修改成功！！！");
          this.stockAlarmIds = "";
        }, 300);
      } else {
        Loading.close();
        this.$Message.error(data.message);
      }
    },
    async productSave(isAgain) {
      const Loading = this.$myLoading({
        content: "正在添加，请稍后…"
      });
      var options = this.formItem;
      // 添加其他的多个条码
      var productBarcodeListTemp = [];

      if (this.formItem.standardFlag == "1") {
        // 标准商品
        if (this.productBarcodeList.length > 0) {
          for (let i = 0; i < this.productBarcodeList.length; i++) {
            const barcodeItem = this.productBarcodeList[i];
            productBarcodeListTemp.push(barcodeItem.value);
          }
        }
      }
      options["productBarcodeList"] = productBarcodeListTemp;
      options["initStockNumber"] = options.stockNumber;
      delete options.stockNumber;
      const { data, status } = await productSave(options);
      if (data.code == 200 && status == 200) {
        this.pageNum = 1;
        console.log('2');
        this.productFindPage(Loading);
        let timer = setTimeout(() => {
          clearTimeout(timer);
          timer = null;
          if (isAgain) {
            this.handleReset();
          } else {
            this.closeModal();
          }
          Loading.close();
          this.$Message.success("保存成功！！！");
        }, 300);
      } else {
        Loading.close();
        this.$Message.error(data.message);
      }
    },
    async producBatchDeleteByIds() {
      const ids = [];
      this.delLoading = true;
      this.selection.forEach((item) => {
        ids.push(item.id);
      });
      const { data, status } = await producBatchDeleteByIds(ids);
      if (data.code == 200 && status == 200) {
        this.pageNum = 1;
        console.log('3');
        this.productFindPage();
        this.selection = [];
        this.$Message.success("删除成功！！！");
        let timer = setTimeout(() => {
          clearTimeout(timer);
          timer = null;
          this.delLoading = false;
          this.modalDel = false;
          this.formIndex = -1;
        }, 300);
      } else {
        this.$Message.error(data.message);
      }
    },
    async stockAlarms(storeCode, productCode) {
      const item = {
        productCode,
        storeCode
      };
      const { data, status } = await stockAlarm(item);
      if (data.code == 200 && status == 200) {
        if (data.data == null) {
          this.formItem.stockAlarm = 0;
          this.isNum = true;
          this.formItem.minNum = "";
          this.formItem.maxNum = "";
          this.stockAlarmIds = "";
          this.formItem.stockAlarmId = "";
        } else {
          this.formItem.stockAlarmId = data.data.id;
          this.stockAlarmIds = data.data.id;
          this.formItem.stockAlarm = 1;
          if (this.modalFlag == "show") {
            this.isNum = true;
          } else {
            this.isNum = false;
          }
          this.formItem.minNum = data.data.minNum;
          this.formItem.maxNum = data.data.maxNum;
        }
      }
    },
    deleted() {
      if (this.selection.length > 0) {
        this.modalDel = true;
      } else {
        this.$Message.warning("请选中要删除的产品！");
      }
    },
    selectChange(treeNode) {
      if (treeNode.length == 0) {
        // this.pid = '';
        // this.classCode = '';
        this.currentTreeNode[0].selected = true;
      } else {
        this.currentTreeNode = treeNode;
        this.pid = treeNode[0].pid;
        this.classCode = treeNode[0].classCode;
        this.fastQuery = "";
        const Loading = this.$myLoading({
          content: "正在查询商品，请稍后…"
        });
        this.pageNum = 1;
        console.log('4');
        this.productFindPage(Loading);
      }
    },
    quickSearch() {
      const Loading = this.$myLoading({
        content: "正在查询商品，请稍后…"
      });
      console.log('5');
      this.productFindPage(Loading);
     
    },
    changePage(pageNum) {
      this.pageNum = pageNum;
      this.quickSearch();
    },
    changePageSize(pageSize) {
      console.log(pageSize,'pageSize');
      this.pageSize = Number(pageSize);
      this.pageNum = 1;
      this.quickSearch();
    },
    // 库房
    // async stockWareHouseList() {
    //   const item = {
    //     storeCode: this.$store.state.storeInfo.storeCode
    //   };
    //   const { data } = await stockWareHouseList(item);
    //   if (data.code == 200) {
    //     let warehouseData = data.data;
    //     let allArry = [];
    //     for (let i = 0; i < warehouseData.length; i++) {
    //       const item = {};
    //       item.value = warehouseData[i].depotCode;
    //       item.label = warehouseData[i].depotName;
    //       allArry.push(item);
    //     }
    //     this.depotCode = allArry;
    //   }
    // },
    handleBeforeUpload(file) {
      this.Loading = this.$myLoading({
        content: "正在执行导入，请稍后…"
      });
    },
    handleSuccessUpload(response) {
      this.Loading.close();
      if (response.code == 200) {
        //导入成功
        this.impResults = true
        this.impResultsnum = response.data.succCnt
        this.failCntnum = response.data.failCnt
        this.batchId = response.data.batchId

        // this.$Message.info("导入成功");
        this.pageNum = 1;
        console.log('成功');
        console.log('6');
        this.productFindPage();
      } else {
        this.$Message.error(response.message);
      }
    },
    handleErrorUpload(error, file, fileList) {
      this.Loading.close();
    },
    async productTmplDownload() {
      this.$Message.success('正在导出请勿重复点击');
      const { data, status } = await productTmplDownload();
      if (status == 200) {
        let newTimeDate = new Date();
        let storeInfoJSON = localStorage.getItem("storeInfo");
        let storeInfo = JSON.parse(storeInfoJSON);
        let storeName = storeInfo.storeName;
        let date = Format(newTimeDate, "yy年MM月dd日hh时mm分ss秒");
        saveAs(data, storeName + "-商品导入模板—" + date + ".xls");
      }
    },
    async productExportExcel() {
      let classCode = this.classCode;
      let fastQuery = this.fastQuery;
      let storeCode = this.storeCode;
      this.$Message.success('正在导出请勿重复点击');
      const { data, status } = await productExportExcel({
        classCode,
        fastQuery,
        storeCode
      });
      if (status == 200) {
        let newTimeDate = new Date();
        let storeInfoJSON = localStorage.getItem("storeInfo");
        let storeInfo = JSON.parse(storeInfoJSON);
        let storeName = storeInfo.storeName;
        let date = Format(newTimeDate, "yy年MM月dd日hh时mm分ss秒");
        saveAs(data, storeName + "-商品列表—" + date + ".xls");
      }
    }
  },
  components: {
    ProducterrorExl
  },
  // 执行方法
  mounted() {
    this.init();
  }
};
function getDistribution(distribution) {
  let distributionName = "";
  if (distribution == 0) {
    distributionName = "经销";
  } else if (distribution == 1) {
    distributionName = "代销";
  } else {
    distributionName = "自营";
  }
  return distributionName;
}
</script>

<style scoped src="./index.css" />
<style>
.editable-product-barcode-input-col {
  width: 23%;
}
.product-barcode-input-edit-button-col {
  width: 6%;
}
.product-barcode-input-edit-btn {
  padding: 5px 0px 6px;
  width: 100%;
}
</style>
